import { NavBar, DatePicker } from 'antd-mobile'
import classNames from 'classnames'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DayBill'
const Month = () => {
  const billList = useSelector((state) => state.bill.billList)
  // 根据月份分组
  const monthGroup = useMemo(() => {
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
  }, [billList])

  const [dateVisible, setDatevisible] = useState(false)
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format('YYYY-MM')
  })
  const [currentMonthList, setMonthList] = useState([])
  const monthResult = useMemo(() => {
    const pay = currentMonthList
      .filter((item) => item.type === 'pay')
      .reduce((pre, cur) => pre + cur.money, 0)

    const income = currentMonthList
      .filter((item) => item.type === 'income')
      .reduce((pre, cur) => pre + cur.money, 0)

    return { pay, income, total: pay + income }
  }, [currentMonthList])

  useEffect(() => {
    const nowDate = dayjs().format('YYYY-MM')
    setMonthList(monthGroup[nowDate] ?? [])
  }, [monthGroup]) // 这里的依赖项是monthGroup，因为monthGroup是一个对象，所以每次都会变，所以这里的useEffect会执行
  const onConfirm = (date) => {
    setDatevisible(false)
    const formatDate = dayjs(date).format('YYYY-MM')
    setMonthList(monthGroup[formatDate] ?? [])
    setCurrentDate(formatDate)
  }

  // 根据日期分组
  const dayGroup = useMemo(() => {
    const groupDate = _.groupBy(currentMonthList, (item) =>
      dayjs(item.date).format('YYYY-MM-DD')
    )
    const keys = Object.keys(groupDate)
    return {
      keys,
      groupDate,
    }
  })

  return (
    <div className='monthlyBill'>
      <NavBar
        className='nav'
        backArrow={false}>
        月度收支
      </NavBar>
      <div className='content'>
        <div className='header'>
          {/* 时间切换区域 */}
          <div
            className='date'
            onClick={() => setDatevisible(true)}>
            <span className='text'>{currentDate + ''}月账单</span>
            <span
              className={classNames('arrow', dateVisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className='item'>
              <span className='money'>{monthResult.pay.toFixed(2)}</span>
              <span className='type'>支出</span>
            </div>
            <div className='item'>
              <span className='money'>{monthResult.income.toFixed(2)}</span>
              <span className='type'>收入</span>
            </div>
            <div className='item'>
              <span className='money'>{monthResult.total.toFixed(2)}</span>
              <span className='type'>结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className='kaDate'
            title='记账日期'
            precision='month'
            visible={dateVisible}
            max={new Date()}
            onCancel={() => setDatevisible(false)}
            onConfirm={onConfirm}
          />
        </div>
        {dayGroup.keys.map((key) => {
          return (
            <DailyBill
              date={key}
              key={key}
              billList={dayGroup.groupDate[key]}
            />
          )
        })}
      </div>
    </div>
  )
}

export default Month
